<template>
  <div>
    <el-table
      ref="table"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="专项卡名称" min-width="120" prop="name" show-overflow-tooltip />
      <el-table-column align="center" label="本金金额" min-width="100" prop="balance" show-overflow-tooltip />
      <el-table-column align="center" label="本金有效期至" min-width="160" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.balanceValidTimeEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="赠送金额" min-width="100" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.giveBalance }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="赠送有效期至" min-width="160" prop="" show-overflow-tooltip>
        <template v-slot="scope">
          <span>{{ scope.row.giveBalanceValidTimeEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="80" show-overflow-tooltip>
        <template v-slot="scope">
          <span
            v-if="meta.indexOf('MemberWithdrawal') > -1"
            class="primaryColor pointer"
            @click="handleWithdraw(scope.row)"
          >提现</span>
        </template>
      </el-table-column>
    </el-table>
    <Paginations :integrated="false" :total="total" :page="pagination.page" @current-change="handleCurrentChange" />
    <el-dialog
      title="专项卡余额提现"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="isShowWithdraw"
      width="600px"
      class="form_wrap"
    >
      <div class="header df_ac">
        <span class="flex1">本金余额：<span class="red">{{ activeRow.balance }}元</span></span>
        <span class="flex1">赠送余额：{{ activeRow.giveBalance }}元</span>
      </div>
      <el-form ref="formRef" :model="activeRow" label-width="120px" :rules="rules">
        <el-form-item prop="amount" label="本金减少">
          <el-input
            v-model="activeRow.amount"
            :maxlength="30"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            class="w400"
            clearable
          />
          <div class="placeholder9">最高金额为本金余额</div>
        </el-form-item>
        <el-form-item prop="giveAmount" label="赠金减少">
          <el-input
            v-model="activeRow.giveAmount"
            :maxlength="30"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            class="w400"
            clearable
          />
          <div class="placeholder9">最高金额为赠金余额</div>
        </el-form-item>
        <el-form-item prop="realAmount" label="实到金额">
          <el-input
            v-model="activeRow.realAmount"
            :maxlength="30"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            class="w400"
            clearable
          />
          <div class="placeholder9">最高金额为本金余额</div>
        </el-form-item>
        <el-form-item prop="note" label="提现说明">
          <el-input v-model="activeRow.note" class="w400" clearable placeholder="请输入说明" />
        </el-form-item>
        <el-form-item prop="type" label="提现方式">
          <el-radio-group v-model="activeRow.type">
            <el-radio-button label="0">微信</el-radio-button>
            <el-radio-button label="1">支付宝</el-radio-button>
            <el-radio-button label="2">现金</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowWithdraw = false">取消</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  specialCardByMemId,
  memberWithdraw
} from '@/api'
export default {
  props: {
    memberInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isShowWithdraw: false,
      subLoading: false,
      activeRow: {
        type: '0',
        amount: '',
        giveAmount: ''
      },
      list: [],
      meta: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      rules: {
        amount: [{ required: true, message: '请输入', trigger: 'blur' }],
        realAmount: [{ required: true, message: '请输入', trigger: 'blur' }],
        giveAmount: [{ required: true, message: '请输入', trigger: 'blur' }],
        note: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      modalDialog: this.$store.getters.dialog
    }
  },
  created() {
    this.getList()
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    onSubmit() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          const param = { ...this.activeRow }
          if (param.realAmount > param.balance) {
            return this.$message.warning('实到金额应小于等于本金')
          }
          param.amount = param.amount * 1
          param.giveAmount = param.giveAmount * 1
          this.subLoading = true
          memberWithdraw({ param: { ...param, cardType: '1', cardId: param.id, memberId: this.memberInfo.id }}).then(res => {
            if (res.errorCode !== '000000') return
            this.subLoading = false
            this.isShowWithdraw = false
            this.$message.success('提现成功')
            this.getList()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    handleWithdraw(row) {
      this.activeRow = { ...row, amount: row.balance, giveAmount: row.giveBalance, type: '0' }
      this.isShowWithdraw = true
    },
    getList(page) {
      this.listLoading = true
      if (page) {
        this.pagination.page = page
      }
      specialCardByMemId({ pagination: this.pagination, param: { memberId: this.memberInfo.id }}).then(res => {
        this.listLoading = false
        if (res.errorCode !== '000000') return
        this.list = res.recordList
        this.total = res.totalCount
      })
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.form_wrap {
  div {
    line-height: 24px;
  }

  .header {
    background-color: #f7f7f7;
    padding: 10px 60px;
    margin: 0 22px 20px;
  }
}
</style>
